<template>
  <ul class="navigation">
    <li v-for="(v,i) in treedata" :style="{marginLeft:level*15+'px'}" @click="toggle(v)">
      <a href="javascript:void(0)">
        <i class="el-icon-arrow-down" v-if="(v.children&&v.children.length > 0&& v.show)"></i>
        <i class="el-icon-arrow-right" v-if="(v.children&&v.children.length > 0&& !v.show)"></i>
        <el-checkbox v-if="level >= 2" :data-id="v.id" v-model="v.isChecked" @change="clickitem(v.isChecked, v)" ></el-checkbox>
        <span class="m-0">{{v.name}}</span>
      </a>
      <multistation-choose-column2 ref="tree" v-show="v.show" v-if="(v.children&&v.children.length > 0)" :parentarr="parentarr+'/'+v.id+';'+v.name" :level="level+1" :treedata="v.children"></multistation-choose-column2>
    </li>
  </ul>
</template>
<script>
  import Bus from '@/utils/eventTransfer.js'
  import _ from 'lodash'
  import MultistationChooseColumn2 from '@/components/MultistationChooseColumn2'
  // import Bus from '@/utils/eventTransfer.js'
  export default {
    name: 'multistation-choose-column2',
    components: { MultistationChooseColumn2 },
    props: ['treedata', 'parentarr', 'level'],
    data: function() {
      return {
        test: [],
        checked: false
      }
    },
    methods: {
      clickitem: function(checked, item) {
        Bus.$emit('testhaha', {
          checked: checked,
          id: item.id,
          name: item.name,
          parent: this.parentarr
        })
        // delete arr[item.id]
      },
      toggle(row) {
        this.toggleClick(row.id, this.treedata)
        window.event.stopPropagation()
      },
      toggleClick(id, item) {
        if (item) {
          for (var i = 0; i < item.length; i++) {
            if (id === item[i].id) {
              item[i].show = !item[i].show
            }
            if (item[i].children && item[i].children.length > 0) {
              this.toggleClick(id, item[i].children)
            }
          }
        }
      }
    }
  }

</script>
